<script setup lang='ts'>
const router = useRouter()
const keywords = ref('')
const enabled = computed(() => keywords.value.length > 0)
function handleChange(text) {
  keywords.value = text
}
function handleSearch() {
  router.push({ path: 'answer', query: { q: keywords.value } })
}
</script>

<template>
  <div class="pt-50">
    <div class="text-center text-56px font-bold">临沂人社智能客服为您服务</div>
    <div class="my-10 flex-center gap-x-7">
      <div class="text-36px text-primary">即刻体验</div>
      <img src="/deepseek.svg" class="h-10" alt="">
    </div>
    <div class="relative">
      <el-input v-model="keywords" class="search" autosize type="textarea" placeholder="请输入您的问题：" />
      <!-- <textarea v-model="keywords" type="text" class="w-full b rounded-30px bg-gray-100 py-6 pl-6 pr-30 text-32px ring-primary" placeholder="请输入您的问题：" @keyup.enter="handleSearch" /> -->
      <div class="absolute right-6 top-1/2 transform cursor-pointer p-3 text-3xl text-gray-300 -translate-y-1/2">
        <div class="i-ep-promotion block text-5xl" :class="[{ 'text-blue': enabled }]" @click="handleSearch" />
      </div>
    </div>
    <div class="">
      <Questions @change="handleChange" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.search) {
  .el-textarea__inner {
    font-size: 32px;
    padding: 16px 100px 16px 20px !important;
    background: #f8f8f8;
    border-radius: 30px;
    border: 1px solid #ddd;
  }
}
</style>

<route lang='yaml'>
meta:
  title: '智能客服'
</route>
